<template>
	<view>
		<van-tabs :active="activeTabbarIndex" animated @change="changeActivebar">
		  <van-tab title="商品" class="good">
				<shop-empty :show="favGoodsList.length === 0"></shop-empty>
				<van-swipe-cell async-close :right-width="60" v-for="item in favGoodsList" :key="item.collectionid" @close="closeCurrentGood(item, $event)">
				  <van-cell-group>
				    <van-cell>
							<view slot="title">
								<shop-good :goodsname="item.goodsname" :goodsimg="item.goodsimg" :goodsprice="item.goodsbaseprice" :gid="item.goodsid"></shop-good>
							</view>
						</van-cell>
				  </van-cell-group>
				  <view slot="right">删除</view>
				</van-swipe-cell>
			</van-tab>
		  <van-tab title="店铺" class="merchant">
				<shop-empty :show="favMerchantsList.length === 0"></shop-empty>
				<van-swipe-cell async-close :right-width="60" v-for="item in favMerchantsList" :key="item.favid" @close="closeCurrentMerchant(item, $event)">
				  <van-cell-group>
				    <van-cell>
							<view slot="title" class="fav-merchant-item" @click="gotoMechantIndex(item.merchantsid)">
								<image :src="item.photo" mode=""></image>
								<view class="text-info">
									<text>{{ item.merchantsname }}</text>
									<text>{{ year - item.registerdate.split('-')[0] }}年老店&nbsp;关注人数:5000+</text>
								</view>
							</view>
						</van-cell>
				  </van-cell-group>
				  <view slot="right">删除</view>
				</van-swipe-cell>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		onLoad(state) {
			this.activeTabbarIndex = state.index
		},
		data() {
			return {
				// 当前被激活的tabbar标签索引
				activeTabbarIndex: 0,
				// 用户关注的店铺信息
				favMerchantsList: [],
				// 用户关注的商品信息
				favGoodsList: []
			}
		},
		computed: {
			year() {
				const date = new Date()
				return date.getFullYear()
			}
		},
		watch: {
			activeTabbarIndex: {
				handler(newVal, oldVal) {
					if(newVal == 1) {
						this.getUserFavMerchants()
					} else if(newVal == 0) {
						this.getUserFavGoods()
					}
				},
				immediate: true
			}
		},
		methods: {
			// 获取此用户关注的店铺信息
			async getUserFavMerchants() {
				const { data: res } = await uni.$http.get('/user/favs', { id: uni.getStorageSync('uid') })
				if(res.meta.status !== 200) return uni.showToast({
					title: res.meta.message,
					icon: 'error',
					duration: 1500
				})
				this.favMerchantsList = res.recordset
				console.log(this.favMerchantsList)
			},
			// 获取用户关注的商品信息
			async getUserFavGoods() {
				const { data: res } = await uni.$http.get('/user/collection', { id: uni.getStorageSync('uid') })
				if(res.meta.status !== 200) return uni.showToast({
					title: res.meta.message,
					icon: 'error',
					duration: 1500
				})
				this.favGoodsList = res.recordset
			},
			// 用户取消关注此店铺信息
			async cancelFavCurrentMerchant(uid, mid) {
				const { data: res } = await uni.$http.delete('/user/favdel', { uid, mid })
				if(res.meta.status !== 200) return uni.showToast({
					title: res.meta.message,
					icon: 'error',
					duration: 1500
				})
				// 取消关注后重新刷新界面
				this.getUserFavMerchants()
			},
			// 用户取消收藏此商品
			async cancelFavCurrentGood(collectionid) {
				const { data: res } = await uni.$http.delete('/user/favgooddel', { id: collectionid })
				if(res.meta.status !== 200) return uni.showToast({
					title: res.meta.message,
					icon: 'error',
					duration: 1500
				})
				this.getUserFavGoods()
			},
			// 当前激活的tabbar标签页索引下标发生改变时触发
			changeActivebar(e) {
				this.activeTabbarIndex = e.detail.index
			},
			// 当前swipecell组件关闭时触发 取消用户关注此店铺的行为
			closeCurrentMerchant(item, e) {
				const { position } = e.detail
				if(position === 'right') {
					this.cancelFavCurrentMerchant(uni.getStorageSync('uid'), item.merchantsid)
				}
			},
			// 当前swipecell组件关闭时触发 取消用户收藏此商品行为
			closeCurrentGood(item, e) {
				const { position } = e.detail
				if(position === 'right') {
					this.cancelFavCurrentGood(item.collectionid)
				}
			},
			// 前往店铺详情页
			gotoMechantIndex(id) {
				uni.navigateTo({
					url: '/subpages/merchantindex/merchantindex?mid=' + id
				})
			}
		}
	}
</script>

<style>
	.fav-merchant-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.fav-merchant-item image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
	}
	
	.text-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 20rpx;
		font-size: 14px;
	}
	
	.text-info text:nth-child(2) {
		font-size: 12px;
	}
	
	.van-swipe-cell__right {
		width: 60px;
		background-color: red;
		text-align: center;
	}
	
	.good .van-swipe-cell__right view,
	.merchant .van-swipe-cell__right view {
		height: 100%;
		line-height: 140px;
		color: white;
	}
	
	.merchant .van-swipe-cell__right view {
		line-height: 90px;
	}
</style>
